<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 卖家顾问需求小程序</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #ffffff;
        }
        /* 标题颜色 - 深蓝色 */
        .title-color {
            color: #1e3a8a;
        }
        /* 按钮样式 */
        .login-btn {
            width: 100%;
            padding: 14px 16px;
            color: #ffffff;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .login-btn:active {
            transform: scale(0.98);
            opacity: 0.9;
        }
        .btn-phone {
            background-color: #10b981;
        }
        .btn-phone:active {
            background-color: #059669;
        }
        .btn-account {
            background-color: #3b82f6;
        }
        .btn-account:active {
            background-color: #2563eb;
        }
        /* 安全区域适配 */
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            .safe-area-bottom {
                padding-bottom: env(safe-area-inset-bottom);
            }
        }
        /* 响应式适配 */
        @media (max-width: 375px) {
            .logo-title {
                font-size: 20px;
            }
        }
        @media (max-width: 320px) {
            .section-spacing {
                margin-top: 20px;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <!-- 顶部Logo和标题区域 -->
    <div class="px-4 pt-36 pb-12 text-center">
        <div class="mb-8">
            <h1 class="text-3xl font-bold logo-title mb-2">汤武智能</h1>
            <p class="text-sm mt-2">跨境电商人的专属顾问</p>
        </div>
    </div>

    <!-- 登录按钮区域 -->
    <div class="px-4 pt-24 flex-1 flex flex-col justify-center">
        <div class="space-y-4">
            <!-- 手机号快捷登录按钮 -->
            <button class="login-btn btn-phone mx-auto" style="width: 200px; min-width: unset; max-width: 100%;" onclick="window.location.href='customer-home.html'">
                <i class="fas fa-mobile-alt text-white"></i>
                <span>手机号快捷登录</span>
            </button>

            <!-- 知无不言账号登录按钮 -->
            <!-- <button class="login-btn btn-account" onclick="handleAccountLogin()">
                <i class="fas fa-crown text-white"></i>
                <span>知无不言账号登录</span>
            </button> -->
        </div>
        <!-- 底部用户协议，和按钮区拼在一起 -->
        <div class="mt-8 text-center">
            <div class="flex items-center justify-center gap-1 text-sm text-gray-500">
                <input type="checkbox" id="agreeCheckbox" class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                <label for="agreeCheckbox" class="cursor-pointer text-gray-500">
                    同意
                </label>
                <a href="#" class="text-gray-500 hover:text-gray-600">《用户协议》</a>
                <span class="text-gray-500">和</span>
                <a href="#" class="text-gray-500 hover:text-gray-600">《隐私政策》</a>
            </div>
        </div>
    </div>

    <script>
        // 手机号快捷登录
        function handlePhoneLogin() {
            console.log('手机号快捷登录');
            // 这里可以添加手机号登录逻辑
            // 示例：跳转到手机号登录页面
            // window.location.href = 'phone-login.html';
        }

        // 知无不言账号登录
        function handleAccountLogin() {
            console.log('知无不言账号登录');
            // 这里可以添加账号登录逻辑
            // 示例：跳转到账号登录页面
            // window.location.href = 'account-login.html';
        }
    </script>
</body>
</html>
